<template>
  <div class="api-keys-container">
    <div class="header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">API密钥管理</div>
      </div>
      <div class="header-right">
        <t-button @click="action.openAddDialog" theme="primary">
          <template #icon>
            <AddIcon />
          </template>
          添加密钥
        </t-button>
      </div>
    </div>

    <div class="content">
      <div class="description">
        <t-alert theme="info" title="关于API密钥">
          <template #message>
            <p>在此页面管理您的OpenAI API密钥用于语音合成功能。启用多个密钥时，系统将随机选择一个使用，以降低单个密钥的使用频率。</p>
          </template>
        </t-alert>
      </div>

      <div class="api-keys-list">
        <t-table
          :data="apiKeys"
          :columns="columns"
          row-key="id"
          hover
          stripe
          :loading="tableLoading"
          empty="暂无API密钥"
        >
          <template #name="{ row }">
            <div class="key-name">{{ row.name }}</div>
            <div class="key-description">{{ row.description || '无描述' }}</div>
          </template>

          <template #key="{ row }">
            <div class="key-value">
              <span v-if="row.showKey">{{ row.key }}</span>
              <span v-else>{{ maskApiKey(row.key) }}</span>
              <t-button
                variant="text"
                theme="primary"
                size="small"
                @click="action.toggleShowKey(row)"
              >
                <BrowseIcon v-if="!row.showKey" />
                <BrowseOffIcon v-else />
              </t-button>
            </div>
          </template>

          <template #enabled="{ row }">
            <t-tag v-if="row.enabled" theme="success">已启用</t-tag>
            <t-tag v-else theme="warning">已禁用</t-tag>
          </template>

          <template #created_at="{ row }">
            <p style="color: #000000">{{ formatDate(row.created_at) }}</p>
          </template>

          <template #operation="{ row }">
            <t-space>
              <t-button
                variant="text"
                theme="primary"
                size="small"
                @click="action.toggleStatus(row)"
              >
                {{ row.enabled ? '禁用' : '启用' }}
              </t-button>
              <t-button
                variant="text"
                theme="primary"
                size="small"
                @click="action.openEditDialog(row)"
              >
                编辑
              </t-button>
              <t-button
                variant="text"
                theme="danger"
                size="small"
                @click="action.confirmDelete(row)"
              >
                删除
              </t-button>
            </t-space>
          </template>
        </t-table>
      </div>
    </div>

    <!-- 添加/编辑API密钥对话框 -->
    <t-dialog
      v-model:visible="dialogVisible"
      :header="isEditing ? '编辑API密钥' : '添加API密钥'"
      :footer="false"
      width="500px"
    >
      <t-form
        ref="form"
        :data="formData"
        :rules="rules"
        @submit="action.submitForm"
      >
        <t-form-item label="名称" name="name">
          <t-input v-model="formData.name" placeholder="请输入密钥名称" />
        </t-form-item>

        <t-form-item label="密钥" name="key">
          <t-input v-model="formData.key" placeholder="请输入API密钥，以sk-开头" />
        </t-form-item>

        <t-form-item label="描述" name="description">
          <t-textarea
            v-model="formData.description"
            placeholder="请输入密钥描述（可选）"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </t-form-item>

        <t-form-item label="是否启用" name="enabled">
          <t-switch v-model="formData.enabled" />
        </t-form-item>

        <div class="form-footer">
          <t-space>
            <t-button theme="default" @click="dialogVisible = false">取消</t-button>
            <t-button theme="primary" type="submit" :loading="submitLoading">确认</t-button>
          </t-space>
        </div>
      </t-form>
    </t-dialog>

    <!-- 确认删除对话框 -->
    <t-dialog
      v-model:visible="confirmDialogVisible"
      header="确认删除"
      :confirm-btn="{ content: '删除', theme: 'danger' }"
      :cancel-btn="{ content: '取消' }"
      @confirm="action.deleteApiKey"
    >
      <p>确定要删除 "{{ currentKey?.name }}" 吗？此操作不可恢复。</p>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue';
import {
  ChevronLeftIcon,
  AddIcon,
  BrowseIcon,
  BrowseOffIcon
} from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import {
  getAllApiKeys,
  addApiKey,
  updateApiKey,
  deleteApiKey,
  toggleApiKeyStatus
} from '@renderer/api/apiKeys';

const router = useRouter();
const tableLoading = ref(false);
const dialogVisible = ref(false);
const confirmDialogVisible = ref(false);
const submitLoading = ref(false);
const isEditing = ref(false);
const currentKey = ref(null);
const apiKeys = ref([]);

// 表格列定义
const columns = [
  { colKey: 'name', title: '名称', width: '200', cell: { col: 'name' } },
  { colKey: 'key', title: 'API密钥', width: '300', cell: { col: 'key' } },
  { colKey: 'enabled', title: '状态', width: '100', cell: { col: 'enabled' } },
  { colKey: 'created_at', title: '创建时间', width: '150', cell: { col: 'created_at' } },
  { colKey: 'operation', title: '操作', fixed: 'right', width: '180', cell: { col: 'operation' } },
];

// 表单数据
const formData = reactive({
  name: '',
  key: '',
  description: '',
  enabled: false
});

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入密钥名称', trigger: 'blur' }],
  key: [
    { required: true, message: '请输入API密钥', trigger: 'blur' },
    {
      validator: (val) => val.startsWith('sk-'),
      message: 'API密钥必须以sk-开头',
      trigger: 'blur'
    }
  ]
};

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '未知';
  const date = new Date(timestamp);
  return date.toLocaleString();
};

// 掩码API密钥
const maskApiKey = (key) => {
  if (!key) return '***';
  return key.substring(0, 5) + '...' + key.substring(key.length - 4);
};

// 加载API密钥列表
const loadApiKeys = async () => {
  tableLoading.value = true;
  try {
    const result = await getAllApiKeys();
    apiKeys.value = result.map(key => ({
      ...key,
      showKey: false // 添加显示密钥的控制属性
    }));
  } catch (error) {
    console.error('加载API密钥失败:', error);
    MessagePlugin.error('加载API密钥失败: ' + (error.message || '未知错误'));
  } finally {
    tableLoading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  formData.name = '';
  formData.key = '';
  formData.description = '';
  formData.enabled = false;
};

const action = {
  // 返回上一页
  back() {
    router.push("/home");
  },

  // 打开添加对话框
  openAddDialog() {
    isEditing.value = false;
    resetForm();
    dialogVisible.value = true;
  },

  // 打开编辑对话框
  openEditDialog(row) {
    isEditing.value = true;
    formData.name = row.name;
    formData.key = row.key;
    formData.description = row.description || '';
    formData.enabled = !!row.enabled;
    currentKey.value = row;
    dialogVisible.value = true;
  },

  // 提交表单
  async submitForm({ validateResult }) {
    if (validateResult === true) {
      submitLoading.value = true;
      try {
        if (isEditing.value) {
          // 编辑现有密钥
          await updateApiKey(currentKey.value.id, {
            name: formData.name,
            key: formData.key,
            description: formData.description,
            enabled: formData.enabled ? 1 : 0
          });
          MessagePlugin.success('API密钥更新成功');
        } else {
          // 添加新密钥
          await addApiKey(
            formData.name,
            formData.key,
            formData.description,
            formData.enabled ? 1 : 0
          );
          MessagePlugin.success('API密钥添加成功');
        }
        dialogVisible.value = false;
        await loadApiKeys();
      } catch (error) {
        console.error('保存API密钥失败:', error);
        MessagePlugin.error('保存API密钥失败: ' + (error.message || '未知错误'));
      } finally {
        submitLoading.value = false;
      }
    }
  },

  // 确认删除对话框
  confirmDelete(row) {
    currentKey.value = row;
    confirmDialogVisible.value = true;
  },

  // 删除API密钥
  async deleteApiKey() {
    if (!currentKey.value) return;

    try {
      await deleteApiKey(currentKey.value.id);
      MessagePlugin.success('API密钥删除成功');
      await loadApiKeys();
    } catch (error) {
      console.error('删除API密钥失败:', error);
      MessagePlugin.error('删除API密钥失败: ' + (error.message || '未知错误'));
    }
  },

  // 切换密钥显示状态
  toggleShowKey(row) {
    row.showKey = !row.showKey;
  },

  // 切换密钥启用状态
  async toggleStatus(row) {
    try {
      await toggleApiKeyStatus(row.id, !row.enabled);
      MessagePlugin.success(`${row.name} ${row.enabled ? '已禁用' : '已启用'}`);
      await loadApiKeys();
    } catch (error) {
      console.error('更改API密钥状态失败:', error);
      MessagePlugin.error('更改API密钥状态失败: ' + (error.message || '未知错误'));
    }
  }
};

onMounted(() => {
  loadApiKeys();
});
</script>

<style lang="less" scoped>
.api-keys-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    background-color: #ffffff;  // 深色背景改为白色
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    &-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
      -webkit-app-region: no-drag;

      .icon {
        font-size: 20px;
      }
    }

    &-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }

    &-right {
      display: flex;
      align-items: center;
      gap: 16px;
      -webkit-app-region: no-drag;
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    overflow: auto;

    .description {
      margin-bottom: 20px;

      :deep(.t-alert) {
        background-color: rgba(255, 119, 11, 0.1);  // 保留原有的警告色背景
        border-color: rgba(255, 119, 11, 0.3);  // 保留原有的警告色边框
      }

      :deep(.t-alert__title) {
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-alert__message) {
        color: rgba(0, 0, 0, 0.8);  // 半透明白色改为半透明黑色
      }
    }

    .api-keys-list {
      :deep(.t-table) {
        background-color: #ffffff;  // 深色背景改为白色
        border-color: #e0e0e0;  // 深色边框改为浅灰色
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感
        border-radius: 4px;  // 添加圆角

        .t-table__header {
          background-color: #f5f5f5;  // 深色表头背景改为浅灰色
          color: #333333;  // 白色文字改为深灰色

          th {
            border-color: #e0e0e0;  // 深色边框改为浅灰色
            font-weight: 600;  // 加粗表头文字
          }
        }

        .t-table__body {
          color: #333333;  // 白色文字改为深灰色

          td {
            border-color: #e0e0e0;  // 深色边框改为浅灰色
          }

          .t-table-row:hover {
            background-color: #f9f9f9;  // 鼠标悬停背景改为更浅的灰色
          }
        }

        .t-table__empty {
          color: rgba(0, 0, 0, 0.5);  // 半透明白色改为半透明黑色
        }
      }

      .key-name {
        font-weight: 500;
        font-size: 14px;
        color: #333333;  // 黑色改为深灰色，原代码中这里似乎有误，应为白色
      }

      .key-description {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.7);  // 黑色改为半透明黑色，原代码中这里似乎有误，应为半透明白色
        margin-top: 4px;
      }

      .key-value {
        display: flex;
        align-items: center;
        gap: 8px;  // 增加间距使布局更舒适
        font-family: monospace;
        font-size: 13px;  // 稍微调整字体大小，提高可读性
        color: #0052d9;  // 黑色改为品牌蓝色，使API密钥更明显，原代码中这里似乎有误，应为白色
        background-color: rgba(0, 82, 217, 0.05);  // 添加淡蓝色背景，增强区分度
        padding: 4px 8px;  // 添加内边距
        border-radius: 4px;  // 添加圆角
      }
    }
  }
}

// 对话框样式
:deep(.t-dialog) {
  background-color: #ffffff;  // 深色背景改为白色

  .t-dialog__header {
    color: #333333;  // 白色文字改为深灰色
    border-bottom: 1px solid #e0e0e0;  // 添加边框分隔线
    padding-bottom: 16px;  // 增加一些内边距
  }

  .t-dialog__body {
    color: #333333;  // 白色文字改为深灰色
  }

  .t-form__label {
    color: #333333;  // 白色文字改为深灰色
  }

  .t-input, .t-textarea {
    --td-bg-color-specialcomponent: #ffffff;  // 深色输入框背景改为白色
    --td-text-color-primary: #333333;  // 白色文字改为深灰色
    --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

    input, textarea {
      background-color: #ffffff;  // 深色输入框背景改为白色
      border-color: #e0e0e0;  // 深色边框改为浅灰色
      color: #333333;  // 白色文字改为深灰色

      &:hover, &:focus {
        border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
      }
    }

    &:focus-within {
      box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
    }
  }
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;  // 添加顶部边框
}
</style>
